<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css"/>
</head>
<body>
<form class="layui-form" action="" lay-filter="edit">
    <div class="mainBox">
        <div class="main-container">
            <!-- id隐藏列 -->
            <div class="layui-form-item layui-hide">
                <label class="layui-form-label">id</label>
                <div class="layui-input-block">
                    <input type="text" name="commId">
                </div>

                <div class="layui-input-block">
                    <input type="text" name="commPicId">
                </div>
            </div>
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品类型</label>
                        <div class="layui-input-block">
                            <ul id="selectParent" name="commTypeId" class="dtree" data-id="0"></ul>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">商品名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="commName" lay-verify="title|required" autocomplete="off" maxlength="80"
                                   placeholder="请输入商品名称"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品单价</label>
                        <div class="layui-input-block">
                            <input type="text" name="commPrice" lay-verify="number|required" autocomplete="off" maxlength="5" value="0"
                                   placeholder="请输入商品单价"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">计量单位</label>
                        <div class="layui-input-block">
                            <input type="text" name="commUnit" lay-verify="title" autocomplete="off" maxlength="10"
                                   placeholder="请输入计量单位"
                                   class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品图片</label>
                        <div class="layui-input-block">
                            <div class="layui-col-xs6">
                                <div style="width:150px;height:150px;border: 1px solid rgb(200, 200, 200);border-radius: 50%;overflow:hidden;">
                                    <img id="commPicUri" src="" style="width:150px;height:150px;">
                                </div>
                            </div>
                            <div class="layui-col-xs-offset6" style="text-align: right;">
                                <button type="button" class="layui-btn" id="uploadPicture">
                                    <i class="layui-icon"></i>
                                    上传
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">商品规格</label>
                <div id="specsView" class="layui-input-block">
                </div>
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="commSpecs" lay-verify="title" autocomplete="off" maxlength="10"-->
<!--                           placeholder="请输入商品规格"-->
<!--                           class="layui-input">-->
<!--                </div>-->
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入备注" name="commRemark" class="layui-textarea" autocomplete="off" maxlength="80"></textarea>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit lay-filter="save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="pear-btn pear-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>

<script id="specsdemo" type="text/html">
    {{# layui.each(d.data, function(index, item){ }}
    <input value="{{ item.commSpecsId }}" title="{{ item.commSpecsName }}"
           {{item.checked ? 'checked' : '' }}
    type="checkbox" name="commSpecsIds" lay-skin="primary">
    {{# }); }}
</script>

<script>
    layui.use(['form', 'jquery', 'dtree','laytpl', 'easyAdmin', 'layer', 'cropper', 'upload'], function () {
        // let module = "product";
        // let uri = "/comm/" + module;
        // let easyAdmin = layui.easyAdmin;
        // easyAdmin.FormVal(uri);
        // easyAdmin.FormSave(uri);

        let form = layui.form;
        let $ = layui.jquery;
        let dtree = layui.dtree;
        var laytpl = layui.laytpl;
        let easyAdmin = layui.easyAdmin;
        let upload = layui.upload;
        let id;

        form.on('submit(save)', function (data) {
            let specsIds = "";
            $('input[type=checkbox]:checked').each(function () {
                specsIds += $(this).val() + ",";
            });
            specsIds = specsIds.substr(0, specsIds.length - 1);
            data.field.specsIds = specsIds;

            data.field.commId = id;

            easyAdmin.http({
                url: '/comm/product',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    if (result.success) {
                        layer.msg(result.msg, {icon: 1, time: 1000, area: ['100px', '80px']}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                            parent.layui.table.reload("table");
                        });
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 1000, area: ['260px', '80px']});
                    }
                }
            })
            return false;
        });

        id = easyAdmin.getQueryString("id");
        easyAdmin.http({
            url: '/comm/product/' + id,
            dataType: 'json',
            contentType: 'application/json',
            type: 'get',
            success: function (result) {
                if (result.success) {
                    //表单数据回显
                    form.val("edit", result.data);
                    //回显图片
                    $("#commPicUri").attr("src", result.data.commPicUri);

                    easyAdmin.httpGet("/comm/type/tree", function (treeData) {
                        dtree.renderSelect({
                            elem: "#selectParent",
                            data: treeData.data,
                            selectCardHeight: "150",
                            method: 'get',
                            selectInputName: {nodeId: "commTypeId", context: "commTypeName"},
                            // skin: "layui",
                            dataFormat: "list",
                            response: {treeId: "commTypeId", parentId: "pid", title: "commTypeName"},
                            selectInitVal: result.data.commTypeId + ''
                        });
                    })

                } else {
                    layer.msg(result.msg, {icon: 2, time: 1000});
                }
            }
        });

        upload.render({
            elem: '#uploadPicture'
            , url: '/sys/file/upload-product' //此处配置你自己的上传接口即可
            , accept: 'images' //图片文件
            , data: {
                id: 1,
                name: 'laker'
            },
            done: function (res) {
                // layer.msg('上传成功');
                $("#commPicUri").attr("src", res.data.filePath);
                $("input[name='commPicId']").val(res.data.fileId);
                console.log(res)
            }, error: function () {
                //请求异常回调
                layer.msg('上传文件失败');
            }
        });

        $("#commPicUri").on('click', function (obj) {
            // 获取图片地址
            var imgSrc = $("#commPicUri").attr("src");
            if (imgSrc != "") {
                // 图片预览
                layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 0,
                    area: 'auto',
                    skin: 'layui-layer-nobg', // 没有背景色的class
                    shadeClose: true,
                    content: "<img src='" + imgSrc + "' style='margin: auto; max-width: 100%; max-height: 100%;'>"
                });
            }
        });

        easyAdmin.httpGet("/comm/specs/specsList?commId=" + id, function (result) {
            var getTpl = specsdemo.innerHTML;
            var view = document.getElementById('specsView');
            laytpl(getTpl).render(result, function (html) {
                view.innerHTML = html;
            });

            form.render();
        });
    })
</script>
<script>
</script>
</body>
</html>
